import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { Table, Modal, Button } from 'antd';
import CustomerCart from '../../customerCenter/CustomerCard';
import Details from './details';
import { markIdCard , markPhoneNumber } from '../../../utils'
class CallTable extends Component {
  constructor(props) {
    super(props);
    this.state = {
      tableData: {},
      customerCardVisible: false,
      currentCustomerId: null,
      visible: false,
      callId:undefined
    };
  }
  componentWillMount() {
    this.setState({
      tableData: this.props.tableData,
    });
  }
  showModal = () => {
    this.setState({
      visible: true,
    });
  }
  handleOk = (e) => {
    console.log(e);
    this.setState({
      visible: false,
    });
  }
  handleCancel = (e) => {
    console.log(e);
    this.setState({
      visible: false,
    });
  }
  componentWillReceiveProps(nextProps) {
    if (
      JSON.stringify(this.props.tableData) !==
      JSON.stringify(nextProps.tableData)
    ) {
      this.setState({
        tableData: nextProps.tableData,
      });
    }
  }

  tableChange = (pagination) => {
    this.props.pageChange(pagination)
  };
  // 显示会员卡片
  showCustomerCard = (id) => {
    this.setState({
      customerCardVisible: true,
      currentCustomerId: id,
    });
  };
  hideCustomerCard = () => {
    this.setState({
      customerCardVisible: false,
    });
  };
  getChildrenMsg = (val) => {
    this.setState({
      revokeModalShow: this.refs['children'].state.visible
    })
    this.props.parent.getTableChildMsg(this, false)
  }
  goSubject(callId) {
    this.setState({
      callId:callId
    }, () => {
        this.showModal()
    })

  }
  render() {
    const columns = [
      {
        title: '会员/用户',
        dataIndex: 'patientName',
        width: 120,
        key: 'patientName',
        render: (text, row) => {
          return (
            <span
              style={{ textDecoration: 'underline', cursor: 'pointer' }}
              onClick={() => {
                this.showCustomerCard(row.patientId);
              }}
            >
              {text}
            </span>
          );
        },
      }
      ,
      {
        title: '主题',
        dataIndex: 'subject',
        width: 150,
        key: 'subject',
        // render: (text, row) => {
        //   return (
        //     <span className='clickable overflow2' onClick={this.goSubject.bind(this,row.callId)}>{text}</span>

        //   );
        // },
      },
      {
        title: '呼入/呼出',
        dataIndex: 'callType',
        width: 100,
        key: 'callType',
        render: (text, row) => {
          if (text == '0') {
            return '呼入';
          }else{
            return '呼出'
          }
        },
      },
      {
        title: '被叫/主叫号码',
        dataIndex: 'phone',
        key: 'phone',
        render: (text, row) => {
          return (
            <span className='clickable overflow2' onClick={this.goSubject.bind(this,row.callId)}>{markPhoneNumber(text)}</span>

          );
        },
      },
      {
        title: '一级分类',
        dataIndex: 'taskType',
        key: 'taskType',
      },
      {
        title: '二级分类',
        dataIndex: 'taskReclassify',
        key: 'taskReclassify',
      },
      {
        title: '通话录音',
        dataIndex: 'videoUrl',
        key: 'videoUrl',
        render: (text, row) => {
          return (
            <span>
              <audio controls>
                <source src={row.videoUrl} type="audio/ogg" />
                <source src={row.videoUrl} type="audio/mpeg" />
                您的浏览器不支持 audio 元素。
              </audio>
            </span>
          );
        },
      },
      {
        title: '客服',
        dataIndex: 'userName',
        key: 'userName'
      },
      {
        title: '通话时间',
        dataIndex: 'createDate',
        key: 'createDate',
      },
    ];
    // 分页
    let { tableData } = this.state;

    let data = tableData
    return (
      <div>
        <CustomerCart
          id={this.state.currentCustomerId}
          visible={this.state.customerCardVisible}
          hideCustomerCard={this.hideCustomerCard}
        ></CustomerCart>

        <div className='table-box block table-search'>
          <Table
            columns={columns}
            dataSource={data.list}
            rowKey={(data) => data.callId}
            pagination={{
              showSizeChanger: true,
              total: data.pageIndex !== 1 && data.count === data.pageSize ? data.count + 1 : data.count,
              showTotal: () => `第 ${data.pageIndex} 页`,
              pageSizeOptions: ['10', '20', '50', '100'],
              current: data.pageIndex,
              pageSize: data.pageSize,
            }}
            onChange={this.tableChange}
          />
        </div>
        <Modal
          title="通话详情"
          visible={this.state.visible}
          // onOk={this.handleOk}
          onCancel={this.handleCancel}
          className="width90"
          maskClosable={false}
          footer={[
          // 重点：定义右下角 d
          <Button onClick={this.handleOk}>关闭</Button> ]}
        >
          <div>
            { this.state.visible&&this.state.callId?<Details callId={ this.state.callId}></Details>:null}
          </div>
        </Modal>
      </div>
    );
  }
}

export default CallTable;
